<template>
  <el-card class="content">
    <el-form :inline="true">
      <el-form-item label="行政区域">
        <el-select v-model="region"></el-select>
      </el-form-item>
      <el-form-item label="隐患排查点">
        <el-select v-model="checkpoint"></el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-warp">
      <el-table
        stripe
        :data="
          checkList.slice(currentPage * pageSize, (currentPage + 1) * pageSize)
        "
      >
        <el-table-column
          label="隐患点排查"
          prop="site"
          align="center"
        ></el-table-column>
        <el-table-column
          label="具体位置"
          prop="address"
          align="center"
        ></el-table-column>
        <el-table-column
          label="巡查时间"
          prop="checkTime"
          align="center"
        ></el-table-column>
        <el-table-column label="巡查记录" align="center">
          <template slot-scope="scope">
            <el-button
              v-show="!scope.row.status"
              type="danger"
              size="medium"
              class="long-btn"
              >异常</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="附件" align="center">
          <template slot-scope="scope">
            <el-button
              v-show="!scope.row.status"
              type="primary"
              size="medium"
              plain
              >上传</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="整改情况" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.status"
              type="danger"
              size="medium"
              class="long-btn"
              @click="scope.row.status = true"
              >未整改</el-button
            >
            <el-button v-else type="success" size="medium" class="long-btn"
              >已整改</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="附件" align="center">
          <template slot-scope="scope">
            <el-button
              v-show="!scope.row.status"
              type="primary"
              size="medium"
              plain
              >上传</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="经办人" align="center"></el-table-column>
        <el-table-column label="审核记录" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="page-pagination-warp">
      <el-pagination
        @current-change="pageChange"
        layout="total, jumper, ->, prev, pager, next"
        :total="checkList.length"
        :page-size="pageSize"
        :pager-count="7"
        background
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "CheckStatistics",
  data() {
    return {
      checkList: [
        {
          site: "西宁南山",
          address: "三明市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁大通",
          address: "龙岩市",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "西宁南山",
          address: "龙岩市",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "西宁大通",
          address: "泉州市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁大通",
          address: "三明市",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "西宁南川东路",
          address: "泉州市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁南山",
          address: "泉州市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁大通",
          address: "三明市",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "西宁大通",
          address: "三明市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁南川东路",
          address: "龙岩市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁南川东路",
          address: "龙岩市",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "西宁南川东路",
          address: "龙岩市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁南川东路",
          address: "泉州市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "西宁南川东路",
          address: "泉州市",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: false,
        },
        {
          site: "****站点1",
          address: "*********",
          checkTime: "2020-09-09 09:18:17",
          status: true,
        },
      ],
      pageSize: 10,
      currentPage: 0,
      region: "",
      checkpoint: "",
    };
  },
  methods: {
    pageChange(index) {
      this.currentPage = index - 1;
    },
  },
};
</script>

<style scoped>
.long-btn {
  width: 150px;
}
.page-pagination-warp {
  margin-top: 5px;
}
.table-warp {
  height: 71vh;
}
.el-card{
    height: 80vh;
    margin: -15px;
    border: 0;
}
</style>